<!DOCTYPE html>
<html>
<head>
	<title>我的信息</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="author" content="闲茶良味 QQ:106079595" />
	<meta name="keywords" content="系统定制,APP开发,微信小程序开发,微信公众号开发,支付宝小程序开发,网站开发" />
	<meta name="description" content="浙江木头网络科技有限公司是一家专业的系统开发公司，研发项目有APP,微信小程序,微信公众号,支付宝小程序,网站,ERP,OA,CRM等，欢迎大家咨询定制。" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/app.css" rel="stylesheet" />
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/jquery-1.9.0.min.js"></script>
</head>
<style type="text/css">
	::-webkit-scrollbar{
	  display:none;
	}

	body,html{min-height: 100vh !important}
	*{box-sizing: border-box;}
	.chat{max-width: 1200px;height: 100vh;padding: 50px;margin: auto;}
	.chat .left{float: left;width: 300px; background: #EEEBE8 }
	.chat .right{float: right;width: calc(100% - 300px);background: #F5F5F5;height:calc(100vh - 100px) }
	.left .search{width: 100%;height: 50px;margin-top:10px;padding: 10px 15px;}
	.left .search input{width: 100%;height: 30px;background: #DBD9D8;outline: 0;border: 0;padding: 0 10px;border-radius: 5px;}
	.left .search input:focus{background: #fff;}
	.left ul{width: 100%;height: 100%;overflow-y: scroll;height: calc(100vh - 160px);}
	.left ul li{padding: 10px 10px;overflow: hidden;background: #DEDEDE;}
	.left ul li:nth-of-type(1){margin-top: 10px}
	.left ul li dl{width: 100%;overflow: hidden;}
	.left ul li dl dt{width: 100%;float: left;width:60px;height: 60px;position: relative;}
	.left ul li dl dt span{height: 10px;width: 10px;background: red;position: absolute;top: 0;right: 0;border-radius: 50%;}
	.left ul li dl dt img{width: 100%;border-radius: 5px;}
	.left ul li.active{background:#BEBDBD }
	.left ul dl dd{width: calc(100% - 60px);float: left;padding-left: 10px;}
	.left ul dl dd:nth-of-type(3){color: #999}
	body{background-image: url("/static/admin/img/serviceback.png");background-size: 100%;background-position: center;background-repeat:  no-repeat}
	.right .head{height: 85px;width: 100%;border-bottom: 2px solid #eee;}
	.right .head div p{line-height: 60px;font-size: 30px;padding-left: 20px;}
	.right .head div div.address{line-height: 23px;padding-left: 20px;height: 23px;float: left;}
	.right .head>div.info{width: 35%;float: left;}
	.right  div.product{height: 83px;padding-left: 20px;width: 50%;float: left;width: 65%}
	.right .content{height: calc(100% - 285px);width: 100%;border-bottom: 2px solid #eee}
	.right .send{height: 200px;width: 100%;background: #fff;position: relative;}
	.right .send textarea{width: 100%;height: 160px;border: 0;outline: 0;resize:none;padding: 10px;line-height: 30px;font-size: 15px;}
	.right button{position: absolute;right: 20px;bottom:10px;height: 30px;width: 80px;border: 1px solid #ccc;outline: 0;border-radius: 0;background: #f5f5f5}
	.content ul{height:100%;overflow-y: scroll;display: none;}
	.content li{width: 100%;overflow: hidden;padding: 10px 25px;}
	.content li dl{width: 100%;overflow: hidden;position: relative;}
	.content li dl.mright{float: right;}
	.content li dl.mright dt{float: right;}
	.content li dl.mright dd{float: right;padding-right: 10px;background: #a87848;color:#fff;line-height: 25px;font-size: 16px;padding: 7.5px;border-radius: 3px;margin-right: 10px;}
	.content li dt{background-repeat: no-repeat;background-size: 100%;background-position: center;height: 40px;width: 40px;border-radius: 4px;}
	.content li dl.mright span{width: 0; height: 0; border-top: 4px solid transparent; border-left: 5px solid #a87848; border-bottom:4px solid transparent; position: absolute;right: 45px;top: 15px }
	.content li dl.mleft{float: left;}
	.content li dl.mleft dt{float: left;}
	.content li dl.mleft dd{float: left;padding-left: 10px;background: #fff;color:#333;line-height: 25px;font-size: 16px;padding: 7.5px;border-radius: 3px;margin-left: 10px;}
	.content li dl.mleft span{width: 0; height: 0; border-top: 4px solid transparent; border-right: 5px solid #fff; border-bottom:4px solid transparent; position: absolute;left: 45px;top: 15px }
	.content ul.choose{display: block!important}
	.content .load{width: 100%;height: 50px;text-align: center;padding: 10px;display: none;}
	.content .load img{height: 30px;width: 30px;margin: auto;}
	.right .head .product dl{width: 100%;}
	.right .head .product dl dt{width: 83px;height: 83px;background-repeat: no-repeat;background-position: center;background-size: 80%;float: left;border-radius: 5px;}
	.right .head .product dl dd:nth-of-type(1){line-height: 35px;color:#a87848;float: left;padding-top: 10px; }
	.right .head .product dl dd:nth-of-type(2){line-height: 28px;color:#666;float: left; }
	.right .head .product dl dd:nth-of-type(1) a{color:#a87848;font-size: 16px;}
	.right .head .product dl dd{width: calc(100% - 83px);}
</style>
<body>
	<div class="chat">
		<div class="left">
			<div class="search"><input type="text" name="" placeholder="请输入用户名" onkeyup="search(this)"></div>
			<ul>
				{{range $k,$v:=.json}}
				<li {{if eq $k $.index}}class="active"{{end}} data-index="{{if eq $.uid $v.first.id}}{{$v.second.id}}{{else}}{{$v.first.id}}{{end}}">
					<dl>
						<dt><img src="{{$v.member.pathname}}"><span style="display: {{if ne $v.noread "0"}}block{{else}}none{{end}}"></span></dt>
						<dd>{{$v.member.monicker}}</dd>
						<dd>{{$v.content}}</dd>
						<dd>{{$v.addtime}}</dd>
					</dl>
				</li>
				{{end}}
			</ul>
		</div>
		<div class="right">
			<div class="head">
				{{if .json}}
				<div class="info">
					<p>{{index .json $.index "member" "monicker"}}</p>
					<div class="address">{{index .json 0 "member" "country"}} {{index .json 0 "member" "province"}} {{index .json 0 "member" "city"}}</div>
				</div>
				{{if eq .isservice 1}}
				{{if index .json $.index "readlast"}}
				<div class="product">
					<dl>
						<dt style="background-image: url({{index .json 0 "readlast" "pathname"}})"></dt>
						<dd><a href="/product/content?id={{index .json 0 "readlast" "id"}}" target="_blank">{{index .json 0 "readlast" "title"}}</a></dd>
						<dd>{{index .json 0 "readlast" "addtime"}}</dd>
					</dl>
				</div>
				{{end}}
				{{end}}
				{{end}}
			</div>
			<div class="content">
				<div class="load"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/img/load.gif"></div>
				{{range $k,$v:=.json}}
				<ul {{if eq $k $.index}}class="choose"{{end}} data-index="{{if eq $.uid $v.first.id}}{{$v.second.id}}{{else}}{{$v.first.id}}{{end}}" data-page="2" data-lpath="{{if eq $v.first.id $.uid}}{{$v.second.pathname}}{{end}}" data-rpath="{{if eq $v.first.id $.uid}}{{$v.first.pathname}}{{end}}">
					{{range $v.info}}
						<li>
							<dl class="{{if eq .fid $.uid}}mright{{else}}mleft{{end}}">
								<dt style="background-image: url({{if eq .fid $v.first.id}}{{$v.first.pathname}}{{else}}{{$v.second.pathname}}{{end}});"></dt>
								<dd>{{.content}}</dd>
								<span></span>
							</dl>
						</li>			
					{{end}}
				</ul>
				{{end}}
			</div>
			<div class="send">
				<textarea id="content"></textarea>
				<button id="send">发送</button>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	function search(e){
		$('.left li').each(function(){
			var member=$(this).find('dd:eq(0)').html()
			if(member.indexOf(e.value)==-1){
				$(this).css('display','none')
			}else{
				$(this).css('display','block')
			}
		})
	}
	var uid={{.uid}};
	$('.content ul').scrollTop(99999)
	function qh(){
		$('.left li').unbind('click')
		$('.left li').click(function(){
			var that=$(this)
			if($(this).attr('class')=="active"){
				return
			}else{
				var index=$(this).attr('data-index');
				$.ajax({
					url:"/message/userinfo",
					data:{uid:index},
					type:'get',
					success:function(res){
						console.log(res)
						var html=`<div class="info">
								<p>${res.mem.monicker}</p>
								<div class="address">${res.mem.country} ${res.mem.province} ${res.mem.city}</div>
							</div>`
						if(res.status){
							{{if eq .isservice 1}}
							html+=`<div class="product">
								<dl>
									<dt style="background-image: url(`+res.info.pathname+`)"></dt>
									<dd><a href="/product/content?id=`+res.info.id+`" target="_blank">`+res.info.title+`</a></dd>
									<dd>`+res.info.addtime+`</dd>
								</dl>
							</div>`
							{{end}}
						}
						that.find('dt span').css('display','none')
						$('.left li').attr('class','')
						that.attr('class','active')
						$('.content ul').each(function(){
							if($(this).attr('data-index')==index){
								$(this).attr('class','choose')
								$(this).find('span').css('display','none')
								$(this).scrollTop(99999)
							}else{
								$(this).attr('class','')
							}
						})
						$('.head').html(html)
					}	
				})
			}
		});
	}
	document.getElementById('content').addEventListener('keydown',function(e){
            if(e.keyCode!=13) return;
             
            e.preventDefault();
             
            var send={}
	        send.message=$('.send textarea').val()
	        $('.send textarea').val('')
	        if(!send.message){
	        	return
	        }
	        send.fid=uid
	        $('.content ul').each(function(){//获取头像
	        	if($(this).css('display')=='block'){
	    			send.uid=$(this).attr('data-index')
	        	}
	        })
	        conn.send(JSON.stringify(send));
         
        });
	qh()
	var index;
	document.getElementById("send").onclick=function(){
		var send={}
        send.message=$('.send textarea').val()
        $('.send textarea').val('')
        if(!send.message){
        	return
        }
        send.fid=uid
        $('.content ul').each(function(){//获取头像
        	if($(this).css('display')=='block'){
    			send.uid=$(this).attr('data-index')
        	}
        })
        conn.send(JSON.stringify(send));
	}
	if (window["WebSocket"]) {
    	var thisurl=window.location.href
    	thisurl=thisurl.split('?')
        conn = new WebSocket("ws://" + document.location.host + "/mobile/ws?type=admin");
        conn.onclose = function (evt) {
            // var item = document.createElement("div");
            // item.innerHTML = "<b>Connection closed.</b>";
            // appendLog(item);
        };
        conn.onmessage = function (evt) {
            var messages =JSON.parse(evt.data);
            console.log(messages)
            var dl = document.createElement("li");
            var html=``

            if(messages.fid==uid){//判断是哪个聊天窗口
            	index=messages.uid
            }else{
            	index=messages.fid
            }
            var lpath,rpath,indexblock,indexnew;
            $('.content ul').each(function(){//获取头像
            	if(index==$(this).attr('data-index')){
            		lpath=$(this).attr('data-lpath')
            		rpath=$(this).attr('data-rpath')
            		indexnew=$(this)
            	}
            	if($(this).css('display')=='block'){
        			indexblock=$(this)
            	}
            })
            var monicker;
            if(!lpath){
            	$.ajax({
            		async:false,
            		url:'/admin/getavatar',
            		data:{leftid:index,rightid:uid},
            		success:function(res){
            			lpath=res.lpath
            			monicker=res.monicker
            			rpath=res.rpath
            		}
            	})
            }

            if (messages.fid==uid){
            	html+=`<dl class="mright">
						<dt style="background-image: url(`+rpath+`);"></dt>
						<dd>`+messages.message+`</dd>
						<span></span>
					</dl>`
            }else{
            	html+=`<dl class="mright">
						<dt style="background-image: url(`+lpath+`);"></dt>
						<dd>`+messages.message+`</dd>
						<span></span>
					</dl>`
            }
            dl.innerHTML = html;
            if(indexblock.attr('data-index')==index){  //如果是当前窗口 直接插入内容
            	indexblock.scrollTop(99999)
            	indexblock.append(dl)
            }else{
            	if (indexnew) {   //如果不是最新消息
            		indexnew.append(dl)
            		indexnew.scrollTop(99999)
            		var indexnewnum=indexnew.attr('data-index')
            		$('.left li').each(function(){
            			if($(this).attr('data-index')==indexnewnum){  
            				$(this).find('span').css('display','block'); //显示未读消息原点
            				$('.left li:eq(0)').insertBefore($(this));  //移动到首位
            				$(this).find('dd:eq(1)').html(messages.message); //内容替换
            				$(this).find('dd:eq(2)').html(getNowFormatDate()); //时间替换
            			}
            		})
            	}else{
            		var linew=document.createElement('li')
            		linew.setAttribute('data-index',index)
            		var html2=`<dl> <dt><img src="`+lpath+`"><span style="display: block"></span></dt> <dd>`+monicker+`</dd> <dd>`+messages.message+`</dd> <dd>`+getNowFormatDate()+`</dd></dl>`
            		linew.innerHTML=html2
            		$('.left ul').prepend(linew)
           			var ulnew=document.createElement('ul')
           			ulnew.setAttribute('data-index',index)
           			ulnew.setAttribute('data-page',2)
           			ulnew.setAttribute('data-lpath',lpath)
           			ulnew.setAttribute('data-rpath',rpath)
           			var html3=`<li>`+html+`</li>`
					ulnew.innerHTML=html3
					$('.content').append(ulnew)
					qh()
            	}	
            }
        };
    } else {
        var item = document.createElement("div");
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
    }

	$('.content ul').scroll(function(){
		var top=$(this).scrollTop()
		var that=$(this)
		var height=$(this).find('li:last').offset().top
		if(top==0){
			$('.load').css('display','block')
			var id=$(this).attr('data-index')
			var page=$(this).attr('data-page')
			$.ajax({
				url:window.location.href,
				type:'post',
				data:{id:id,page:page},
				success:function(data){
					var res=data.info
					that.attr('data-page',page+1)
					if(res){
						for(var i=0;i<res.length;i++){
							var li=document.createElement("li")
							var html=`<dl class="`
							if(res[i].fid==uid){
								html+=`mright"><dt style="background-image: url(`+data.right+`);"></dt>`
							}else{
								html+=`mleft"><dt style="background-image: url(`+data.left+`);"></dt>`
							}
							html+=` <dd>`+res[i].content+`</dd> <span></span> </dl>`
							li.innerHTML=html
							that.prepend(li)
						}
						var height2=that.find('li:last').offset().top
						that.scrollTop(height2-height)
						$('.load').css('display','none')
					}else{
						$('.load').css('display','none')
						that.unbind('scroll')
					}
				}
			})
		}
	})
	function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
}
</script>
</html>